<template>
    <div class="brand-container">
        <p class="artboard side-card">Instead of the DEILAI Alliance, we'll call it the YUEQI Alliance, okay?</p>
        <div class="title">
            {{ obj.output }}
            <span class="easy-typed-cursor">|</span>
        </div>
        <div class="guide side-card">
            <p class="yes-no flex-center">Are you ready?</p>
        </div>
        <div class="but-box">
            <button class="comm-submit" @click="scrollDown">
                <span class="edge"></span>
                <span class="front">Yes</span>
            </button>
            <button class="comm-submit" @click="fetchData" :disabled="flag">
                <span class="edge"></span>
                <span class="front">{{ timer == 0 ? 'No' : `${timer}s` }}</span>
            </button>
        </div>
        <svg-icon class="arrow-down" icon-class="down" size="1.2rem" @click="scrollDown"></svg-icon>
    </div>
</template>

<script setup lang="ts">
import useStore from "@/store";
import EasyTyper from "easy-typer-js";
import {useIntervalFn} from "@vueuse/core";

const {app, web} = useStore();

const timer = ref(0);
const flag = ref(false);

const obj = reactive({
    output: "",
    isEnd: false,
    speed: 100,
    singleBack: false,
    sleep: 0,
    type: "normal",
    backSpeed: 100,
    sentencePause: false,
});

const {pause, resume} = useIntervalFn(() => {
    timer.value--;
    if (timer.value <= 0) {
        // 停止定时器
        pause();
        flag.value = false;
    }
}, 1000, {immediate: false});
const start = (time: number) => {
    flag.value = true;
    timer.value = time;
    // 启动定时器
    resume();
};
const scrollDown = () => {
    app.isBrand = false;
    window.scrollTo({
        behavior: "smooth",
        top: document.documentElement.clientHeight,
    });
};
const fetchData = () => {
    start(6);
    fetch("https://v1.hitokoto.cn")
        .then((res) => {
            return res.json();
        })
        .then(({hitokoto}) => {
            new EasyTyper(
                obj,
                hitokoto,
                () => {
                },
                () => {
                }
            );
        });

};
onMounted(() => {
    fetchData();
});
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";

.brand-container {
  position: relative;
  top: 2rem;
  width: 100%;
  height: 90vh;
  margin-bottom: 10vh;
  color: var(--main-1);

  .artboard {
    margin: 0 auto;
    width: 80%;
    text-align: center;
    font-family: "Fredericka the Great", Mulish, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 0.7rem;
    line-height: 1.6;
    animation: titleScale 1s;
  }

  .title {
    margin-top: 1rem;
    text-align: center;
    letter-spacing: 0.1em;
    background: var(--main-2);
    color: var(--main-1);
    box-shadow: inset 0 0 0.06rem 0.03rem var(--main-1);

    .easy-typed-cursor {
      opacity: 1;
      -webkit-animation: blink 0.7s infinite;
      -moz-animation: blink 0.7s infinite;
      animation: blink 0.7s infinite;
    }
  }

  .guide {
    height: 1.65rem;
    width: 8rem;
    margin: 1rem auto;

    .yes-no {
      font-family: "Fredericka the Great", Mulish, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 0.7rem;
      margin: 0 auto;
      width: 80%;
      text-align: center;
    }
  }

  .but-box {
    @include flex;
    gap: 0.5rem;
  }
}

.arrow-down {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  bottom: 0.9rem;
  -webkit-animation: arrow-shake 1.5s ease-out infinite;
  animation: arrow-shake 1.5s ease-out infinite;
  cursor: url(@/assets/cursor/pin.cur), default !important;
}

@media (max-width: 20rem) {
  .brand-container {
    padding: 3rem 0.5rem 0;
  }
}

@media (min-width: 15rem) {
  .title {
    font-size: 0.7rem;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>
